@charset 'utf-8';

@mixin img(){
    width: 100%;
    height: 100%;
}

section{
    width: 100%;
    background: linear-gradient(to bottom,#04060e 20%,#363e4e);
    .move{
        width: 1000px;
        margin: 0 auto;
    }
    aside{
        overflow: hidden;
        ul{
            width: 574px;
            height: 34px;
            background: #f0f0f0;
            margin: 27px auto 0;
            border-radius: 17px;
        li{
            float: left;
            width: 169px;
            height: 34px;
            background: #f0f0f0;
            border-radius:17px;
            cursor: pointer;
            text-align: center;
            position: relative;
            z-index: 1;
            transition: 200ms;
            transform: scale(1);
            span{
                a{
                     font-size: 14px;
                     color: #878787;
                     line-height: 34px;
                }
            }
            .small{
                width: 6px;
                height: 6px;
                border-radius: 50%;
                background: #f0f0f0;
                position: absolute;
                top: 14px;
                left: 12px;
            }
            &:hover,&.active{
                transition: 200ms;
                z-index: 999;
                 background: #eb413d;
                 transform: scale(1.1) translateY(-3px);
                 a{
                     color: white;
                 }
                 .small{
                     background: white;
                 }
            }
        }
        li+li{
            margin-left: -34px;
        }
     }
    }
    article{
        h3{
            color: white;
            font-size: 20px;
            text-align: center;
            margin-top: 34px;
            margin-bottom: 38px;
        }
        .shoplist1,.shoplist2{
            width: 100%;
            li{
                float: left;
                width: 240px;
                margin-bottom: 40px;
                margin-right: 10px;
                div:nth-of-type(1){
                    width: 240px;
                    height: 320px;
                    background: white;
                    position: relative;
                    border-radius: 4px;
                    box-shadow: 4px 4px 8px #d3d3d3 inset,-4px -4px 8px #d3d3d3 inset;
                    img{
                        position: absolute;
                        left: 0;
                        right: 0;
                        top: 0;
                        bottom: 0;
                        margin: auto;
                        transition: 0.5s;
                    }
                    &:hover{
                        img{
                            transform: scale(1.28);
                            transition: 0.5s;
                        }
                    }
                }
                div:nth-of-type(2){
                    margin-top:20px ;
                    text-align: center;
                    span{
                        font-size: 16px;
                        color: white;
                    }
                    input{
                        position: relative;
                        top: 3px;
                    }
                }
            }
    }
    .shoplist2{
        li{
            width: 322px;
            margin-right: 11px;
            margin-bottom: 104px;
        }
        div{
            width: 322px !important;
        }
    }
}
}